<template>

	<view class="">
		<template v-for="(item, index) in itemList">
			<!-- 第一层 -->
			<u-collapse :accordion="false" :key="index" :ref="'collapseHeight'+index" >
				<u-collapse-item :title="item.head" >
					{{ item.body }}
					<recursive-collapse v-if="item.children && item.children.length > 0" :item-list="item.children" />
					<!-- 第二层 -->
					<!-- @change="handleCollapse(eindex,index)" -->
				<!-- 	<u-collapse :accordion="false" v-for="(eitem, eindex) in item.children" :key="eindex"  :ref="'collapseHeightTwo'+eindex">
						<u-collapse-item :title="eitem.head" @myClick="myClick('collapseHeight'+index)">
							{{ eitem.body }}
						</u-collapse-item>
					</u-collapse> -->
					
				</u-collapse-item>
			</u-collapse>

		</template>
	</view>




</template>

<script>
	import Collapse from "@/components/collapse.vue";
	export default {
		name: "recursive-collapse",
		components: {
			Collapse
		},
		props: {
			itemList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {};
		},
		methods: {
			myClick(refName){ 		
				console.log('re',this.$refs) 
				if(this.$refs[refName]){
				// this.$refs[refName][0].init()
				}
			},
			handleCollapse(index) {
						console.log('this.$refs',this.$refs) 
					setTimeout(()=>{
						// this.$refs['collapseHeightTwo'+number][0].init() 
						this.$refs['collapseHeight'+index][0].init()
						console.log('执行完成')
					},500)
					// this.$refs.collapseHeightTwo.init()
			}
		}

	};
</script>

<style lang="scss" scoped>
	/* 样式可以根据需求自定义 */
	.collapse_box {
		.collapse_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #F7F7F7;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 20rpx;
			margin: 10rpx;

			.collapse_title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}

	}
</style>